<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="平台SKU">
              <a-input placeholder="请输入平台SKU" v-model="queryParam.platformSkuCode" :maxLength="50"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="仓库SKU">
              <a-input placeholder="请输入仓库SKU" v-model="queryParam.skuCode" :maxLength="50"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="店铺名称">
              <j-url-select
                placeholder="请输入店铺名称"
                v-model="queryParam.shopId"
                optionLabel="storeName"
                :multiple="true"
                url="/hzkj-oms/oms/store/storeAuthAmazon/storeList"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="产品名称">
              <a-input placeholder="请输入产品名称" v-model="queryParam.name" :maxLength="255"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="产品颜色">
              <a-input placeholder="请输入产品颜色" v-model="queryParam.color" :maxLength="50"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="产品尺寸">
              <a-input placeholder="请输入产品尺寸" v-model="queryParam.size" :maxLength="50"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="对应关系">
              <j-search-select-tag-new
                placeholder="请选择对应关系"
                v-model="queryParam.relation"
                dictCode="archive_maping_relation"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button
        v-has="'ArchiveShopSkuMapingList:add'"
        @click="
          editId = ''
          showEditModal = true
        "
        type="primary"
        icon="plus"
        >新增映射</a-button
      >
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item v-has="'ArchiveShopSkuMapingList:del'" key="1" @click="clickDelete()"
            ><a-icon type="delete" />删除</a-menu-item
          >
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-list
        :loading="loading"
        item-layout="vertical"
        size="large"
        :pagination="ipagination"
        :data-source="dataSource"
      >
        <a-list-item slot="renderItem" slot-scope="record" class="list-item-li">
          <div class="list-item-content">
            <div>
              <span class="sku-code">
                平台SKU：{{ record.platformSkuCode }}
                <a-button type="link" class="copy-btn" icon="copy" @click="copyTo(record.platformSkuCode)"></a-button>
              </span>
              <span class="relation-txt" :class="{ orange: record.relation == 1 }"
                >关系:{{ record.relation_dictText }}</span
              >
              <span class="item-title">所属店铺：</span><span class="item-text">{{ record.shopId_dictText }}</span>
              <span class="item-title">创建人：</span><span class="item-text">{{ record.createBy }}</span>
            </div>
            <div>
              <a
                v-has="'ArchiveShopSkuMapingList:edit'"
                @click="
                  editId = record.id
                  showEditModal = true
                "
                >编辑</a
              >
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                <a-menu slot="overlay">
                  <a-menu-item v-has="'ArchiveShopSkuMapingList:del'">
                    <a @click="clickDelete(record.id)">删除</a>
                  </a-menu-item>
                  <a-menu-item v-has="'ArchiveShopSkuMapingList:log'">
                    <j-operate-log :id="record.id" />
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
          <a-list size="large" :data-source="record.hzArchiveShopSkuItemsList">
            <a-list-item slot="renderItem" slot-scope="record2" class="product-item-li">
              <a-popover trigger="hover" placement="right">
                <template #content>
                  <div class="popover-preview-box">
                    <img :src="record2.imgUrl" />
                  </div>
                </template>
                <viewer :images="[record2.imgUrl]" class="img-box">
                  <img class="sku-img" :src="record2.imgUrl" />
                </viewer>
              </a-popover>

              <span class="bold">仓库SKU：</span><span>{{ record2.skuCode }} * {{ record2.count }}</span>
              <a-button type="link" class="copy-btn" icon="copy" @click="copyTo(record2.skuCode)"></a-button>
              <span class="mr-layout">
                <a-tag v-if="record2.constituteStatus == 1" color="#108ee9"> 单品 </a-tag>
                <a-tag v-else color="#87d068"> 组合 </a-tag>
              </span>

              <span class="bold">产品名称：</span>
              <a-tooltip>
                <template slot="title">
                  {{ record2.name }}
                </template>
                <span class="product-name mr-layout">{{ record2.name }}</span>
              </a-tooltip>
              <span class="bold">颜色/尺寸：</span> <span class="mr-layout">{{ record2.colorSize }}</span>
              <span class="bold">创建时间：</span><span class="mr-layout">{{ record2.createTime }}</span>
              <span class="bold">更新时间：</span><span>{{ record2.updateTime || record2.createTime }}</span>
            </a-list-item>
          </a-list>
        </a-list-item>
      </a-list>
    </div>

    <shop-sku-maping-modal v-if="showEditModal" :visible.sync="showEditModal" :editId="editId" @submit="modalSubmit" />
  </a-card>
</template>

<script>
import copyToClipboard from 'copy-to-clipboard'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction } from '@/api/manage'

import ShopSkuMapingModal from './modules/ShopSkuMapingModal.vue'

export default {
  name: 'ArchiveShopSkuMapingList',
  mixins: [JeecgListMixin],
  components: {
    ShopSkuMapingModal,
  },
  data() {
    return {
      editId: '', //  要编辑或查看的产品档案id，为空表示新增
      showEditModal: false, // 是否展示编辑弹窗
      // 表头
      url: {
        list: '/hzkj-product/product/archive/hzArchiveShopSkuMaping/list',
        delete: '/hzkj-product/product/archive/hzArchiveShopSkuMaping/delete',
        deleteBatch: '/hzkj-product/product/archive/hzArchiveShopSkuMaping/deleteBatch',
      },
      ipagination: {
        current: 1,
        pageSize: 20,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        onChange: this.pageChange,
        onShowSizeChange: this.pageChange,
      },
      columns: [
        {
          title: '平台sku',
          align: 'center',
          dataIndex: 'platformSkuCode',
        },
        {
          title: '关系',
          align: 'center',
          dataIndex: 'relation_dictText',
        },
        {
          title: '所属店铺',
          align: 'center',
          dataIndex: 'shopId_dictText',
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'createBy',
        },
      ],
    }
  },
  methods: {
    pageChange(current, pageSize) {
      this.ipagination.current = current
      this.ipagination.pageSize = pageSize
      this.loadData()
    },
    // 复制到剪贴板
    copyTo(value) {
      try {
        copyToClipboard(value)
        this.$message.success(`已复制SKU编码：${value}`)
      } catch (e) {
        this.$message.error('复制失败')
      }
    },
    clickDelete(id) {
      this.$confirm({
        content: (h) => {
          return h(
            'div',
            {
              domProps: {
                innerHTML: `<div style="padding-left: 40px;">确定是否继续删除？</div>`,
              },
            },
            []
          )
        },
        onOk: () => {
          // 有id就是删除单个，没id就是批量删除
          const url = id ? this.url.delete : this.url.deleteBatch
          const data = id ? { id: id } : { ids: this.selectedRowKeys.join(',') }
          deleteAction(url, data).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              setTimeout(() => {
                //重新计算分页问题
                this.reCalculatePage(1)
                this.loadData()
                this.onClearSelected()
              }, 1000)
            } else {
              this.$message.warning(res.message)
            }
          })
        },
      })
    },
    modalSubmit() {
      // 提交后，因为后端数据存在es缓存，数据更新不及时，延迟后再查
      setTimeout(() => {
        this.modalFormOk()
      }, 1000)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.popover-preview-box {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: #fafafa;
  img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.list-item-li {
  padding: 0;
  margin-bottom: 10px;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.list-item-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fafafa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 8px 20px;

  .sku-code {
    font-weight: bold;
    font-size: 15px;
  }

  .copy-btn {
    height: 20px;
    width: 20px;
    margin-right: 30px;
  }

  .relation-txt {
    font-weight: bold;
    font-size: 14px;
    color: rgb(135, 208, 104);
    margin-right: 30px;

    &.orange {
      color: orange;
    }
  }

  .item-title {
    color: #9f9c9c;
    font-size: 14px;
  }
  .item-text {
    font-size: 14px;
    margin-right: 30px;
  }
}
.bold {
  font-weight: bold;
}
.mr-layout {
  margin-right: 30px;
}
.product-item-li {
  padding: 8px 20px;
  justify-content: left;
  align-items: center;

  &:last-child {
    border-bottom: 0 !important;
  }

  .img-box {
    width: 40px;
    height: 40px;
    margin-right: 30px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    background-color: #fafafa;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .copy-btn {
    height: 20px;
    width: 20px;
    margin-right: 30px;
  }

  .product-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
